<template id='MyMonkey'>
  <div class="MyMonkey">
    <div class="operation">
      <div class="sort">
        <div class="sortSelect" @click="isShowSort = !isShowSort">
          <span>{{ currentSort }}</span>
        </div>
        <ul class="sortMenu" v-if="isShowSort">
          <template v-for="(item, index) in sortList">
            <li :key="index">
              <span @click="selectCurrentSort(item)">{{ item.name }}</span>
            </li>
          </template>
        </ul>
      </div>
      <!-- <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div> -->
    </div>
    <div class="btns">
      <div
        class="select"
        @click="isShowSort = !isShowSort"
        v-if="!isShowMonkeyItem"
      ></div>
      <!-- <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div> -->
    </div>
    <div class="main">
      <ul class="monkeyList">
        <template v-for="(item, index) in dataList">
          <li
            class="monkeyItem"
            :key="index"
            :class="[{ openItem: isShowMonkeyItem }]"
          >
            <div
              class="monkey"
              :style="{ backgroundImage: `url(${item.monkey})` }"
            ></div>
            <div class="desc">
              <p>
                <span class="title">ID</span
                ><span class="id"> {{ item.id }}</span>
              </p>
              <p>
                <span class="title">周期</span><span>{{ item.time }}</span>
              </p>
            </div>
            <div class="tips" v-if="item.tips">
              {{ item.tips }}
            </div>
            <div
              @click="goToDetail(item)"
              class="btn"
              :class="[
                { isFeed: item.status == 1 },
                { isEvolution: item.status == 0 },
              ]"
            >
              <span>{{ item.name }}</span>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <div class="phone">
      <ul
        class="infinite-list"
        v-infinite-scroll="loadMonkeyList"
        style="overflow: auto"
      >
        <template v-for="(item, index) in dataList">
          <li
            class="monkeyItem"
            :key="index"
            :class="[{ openItem: isShowMonkeyItem }]"
          >
            <div class="monkeyItemBg">
              <div
                class="monkey"
                :style="{ backgroundImage: `url(${item.monkey})` }"
              ></div>
              <div class="desc">
                <p>
                  <span class="title">ID</span
                  ><span class="id"> {{ item.id }}</span>
                </p>
                <p>
                  <span class="title">周期</span><span>{{ item.time }}</span>
                </p>
              </div>
              <div class="tips" v-if="item.tips">
                {{ item.tips }}
              </div>
              <div
                @click="goToDetail(item)"
                class="btn"
                :class="[
                  { isFeed: item.status == 1 },
                  { isEvolution: item.status == 0 },
                ]"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "MyMonkey",
  components: {},
  // 定义属性
  data() {
    return {
      screenWidth: "",
      isShowMonkeyItem: false,
      tabList: [
        { id: 1, name: "工作" },
        { id: 2, name: "列表" },
      ],
      isClick: 2,
      currentSort: "按品质(高-低)",
      isShowSort: false,
      sortList: [
        {
          id: 0,
          name: "排列方式",
        },
        {
          id: 1,
          name: "按名称",
        },
        {
          id: 2,
          name: "按品质(高-低)",
        },
        {
          id: 3,
          name: "按品质(低-高)",
        },
        {
          id: 4,
          name: "按等级(高-低)",
        },
        {
          id: 5,
          name: "按等级(低-高)",
        },
        {
          id: 6,
          name: "按周期(高-低)",
        },
        {
          id: 7,
          name: "按周期(低-高)",
        },
        {
          id: 8,
          name: "按价格(高-低)",
        },
        {
          id: 9,
          name: "按价格(低-高)",
        },
        {
          id: 10,
          name: "按成长(高-低)",
        },
        {
          id: 11,
          name: "按成长(低-高)",
        },
      ],
      feedBtn: require("@/assets/images/game/myMonkey/feed.png"),
      evolutionBtn: require("@/assets/images/game/myMonkey/evolution.png"),
      dataList: [
        {
          id: "#898298989",
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "闲置",
        },
        {
          id: 2,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "吃屎",
        },
        {
          id: 3,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "睡觉",
        },
        {
          id: 4,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 5,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 6,
          time: "巅峰期",
          status: 0,
          name: "进阶",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 7,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 8,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 9,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
        {
          id: 10,
          time: "巅峰期",
          status: 1,
          name: "喂养",
          monkey: require("@/assets/images/game/myMonkey/monkey.png"),
          tips: "",
        },
      ],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //当前排序选择
    selectCurrentSort(item) {
      this.currentSort = item.name;
      this.isShowSort = false;
      this.getMonkeyList();
    },
    //详情
    goToDetail(item) {
      this.$router.push({
        path: "/operationMonkey",
        query: { id: item.id, status: item.status },
      });
    },
    //获取list
    getMonkeyList() {
      this.isShowMonkeyItem = true;
      if (this.screenWidth <= 480) {
        setTimeout(() => {
          this.isShowMonkeyItem = false;
        }, 500);
      } else {
        setTimeout(() => {
          this.isShowMonkeyItem = false;
        }, 2300);
      }
    },
    //加载更多
    loadMonkeyList() {},
    getScreenWidth() {
      this.screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.getMonkeyList();
    });
    this.getScreenWidth();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script> 

<style lang='less' scoped>
.MyMonkey {
  user-select: none;
  margin-top: 188px;
  text-shadow: 0px 3px rgba(0, 0, 0, 0.6);
  position: relative;
  .operation {
    display: flex;
    position: absolute;
    top: -68px;
    z-index: 9;
    .sort {
      display: flex;
      margin-top: -72px;
      margin-left: 72px;
      font-size: 24px;
      .sortSelect {
        background-image: url("../../../assets/images/game/myMonkey/drop.png");
        background-size: 100% 100%;
        width: 211px;
        height: 68px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        -webkit-animation: swing-in-top-fwd 1s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
        animation: swing-in-top-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s
          both;
        span {
          margin-top: 14px;
        }
      }
      .sortMenu {
        background-color: #4185b9;
        padding: 14px 26px;
        margin-left: 3px;
        -webkit-animation: swing-in-left-bck 0.6s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
        animation: swing-in-left-bck 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
          0.2s both;
        @-webkit-keyframes swing-in-left-bck {
          0% {
            -webkit-transform: rotateY(-70deg);
            transform: rotateY(-70deg);
            -webkit-transform-origin: left;
            transform-origin: left;
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            -webkit-transform-origin: left;
            transform-origin: left;
            opacity: 1;
          }
        }
        @keyframes swing-in-left-bck {
          0% {
            -webkit-transform: rotateY(-70deg);
            transform: rotateY(-70deg);
            -webkit-transform-origin: left;
            transform-origin: left;
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            -webkit-transform-origin: left;
            transform-origin: left;
            opacity: 1;
          }
        }
        li {
          margin-bottom: 15px;
          span {
            cursor: pointer;
          }
        }
        li:first-child {
          margin-top: 5px;
          margin-bottom: 25px;
        }
      }
    }
    .tab {
      background-image: url("../../../assets/images/game/myMonkey/tab.png");
      background-size: 100% 100%;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      margin-top: -72px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      -webkit-animation: swing-in-top-fwd 1s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
      animation: swing-in-top-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s
        both;
      @-webkit-keyframes swing-in-top-fwd {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      @keyframes swing-in-top-fwd {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      span {
        margin-top: 10px;
        font-size: 30px;
        position: relative;
        cursor: pointer;
      }
      .isChose {
        -webkit-animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        @-webkit-keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
        @keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
      }
      .isClick {
        position: absolute;
        bottom: -10px;
        left: -10%;
        width: 120%;
        height: 6px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0px 2px 0px 0px #000000;
        -webkit-animation: scale-up-hor-center 0.25s
          cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: scale-up-hor-center 0.25s cubic-bezier(0.39, 0.575, 0.565, 1)
          0.5s both;
        @-webkit-keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        @keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
      }
    }
  }
  .btns {
    opacity: 0.5;
    position: absolute;
    top: -148px;
    z-index: 51;
    .select {
      cursor: pointer;
      width: 211px;
      height: 68px;
      margin-left: 72px;
      opacity: 0;
    }
    .tab {
      opacity: 0;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      margin-top: -60px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      span {
        cursor: pointer;
        margin-top: 5px;
        font-size: 30px;
      }
    }
  }
  .main {
    padding: 0 101px;
    margin-top: 256px;
    .monkeyList {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .monkeyItem {
        background-image: url("../../../assets/images/game/myMonkey/bg.png");
        background-size: 100% 100%;
        width: 266px;
        height: 447px;
        margin-right: 97px;
        margin-bottom: 55px;
        position: relative;
        .monkey {
          background-size: 100% 100%;
          width: 311px;
          height: 313px;
          margin-left: -22.5px;
          margin-top: -28px;
          margin-bottom: 4px;
        }
        .desc {
          font-size: 24px;
          padding: 0 10px;
          p {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            .title {
              width: 67px;
            }
            .id {
              font-size: 30px;
            }
          }
          p:last-child {
            margin-bottom: 0px;
          }
        }
        .tips {
          position: absolute;
          bottom: 84px;
          left: -64px;
          background-image: url("../../../assets/images/game/myMonkey/tips.png");
          background-size: 100% 100%;
          width: 64px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
        }
        .btn {
          cursor: pointer;
          background-size: 100% 100%;
          width: 187px;
          height: 53px;
          display: flex;
          justify-content: center;
          margin: 20px auto 0 auto;
          span {
            margin-top: 3px;
            font-size: 36px;
          }
        }
        .isFeed {
          background-image: url("../../../assets/images/game/myMonkey/feed.png");
        }
        .isEvolution {
          background-image: url("../../../assets/images/game/myMonkey/evolution.png");
        }
        .isEvolution:hover {
          -webkit-animation: blink-2 0.9s infinite both;
          animation: blink-2 0.9s infinite both;
          @-webkit-keyframes blink-2 {
            0% {
              opacity: 1;
            }
            50% {
              opacity: 0.2;
            }
            100% {
              opacity: 1;
            }
          }
          @keyframes blink-2 {
            0% {
              opacity: 1;
            }
            50% {
              opacity: 0.2;
            }
            100% {
              opacity: 1;
            }
          }
        }
        .isFeed:hover {
          -webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
          animation: pulsate-bck 1.5s ease-in-out infinite both;
          @-webkit-keyframes pulsate-bck {
            0% {
              -webkit-transform: scale(1);
              transform: scale(1);
            }
            50% {
              -webkit-transform: scale(0.9);
              transform: scale(0.9);
            }
            100% {
              -webkit-transform: scale(1);
              transform: scale(1);
            }
          }
          @keyframes pulsate-bck {
            0% {
              -webkit-transform: scale(1);
              transform: scale(1);
            }
            50% {
              -webkit-transform: scale(0.9);
              transform: scale(0.9);
            }
            100% {
              -webkit-transform: scale(1);
              transform: scale(1);
            }
          }
        }
      }
      .monkeyItem:nth-child(5n) {
        margin-right: 0;
      }
      .openItem {
        -webkit-animation: filpRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
          both;
        animation: filpRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        @-webkit-keyframes filpRight {
          0% {
            -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            opacity: 1;
          }
        }
        @keyframes filpRight {
          0% {
            -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            opacity: 1;
          }
        }
      }
      .openItem:nth-child(1) {
        // -webkit-animation-delay: 1s;
      }
      .openItem:nth-child(2) {
        -webkit-animation-delay: 0.2s;
      }
      .openItem:nth-child(3) {
        -webkit-animation-delay: 0.4s;
      }
      .openItem:nth-child(4) {
        -webkit-animation-delay: 0.6s;
      }
      .openItem:nth-child(5) {
        -webkit-animation-delay: 0.8s;
      }
      .openItem:nth-child(6) {
        -webkit-animation-delay: 1s;
      }
      .openItem:nth-child(7) {
        -webkit-animation-delay: 1.2s;
      }
      .openItem:nth-child(8) {
        -webkit-animation-delay: 1.4s;
      }
      .openItem:nth-child(9) {
        -webkit-animation-delay: 1.6s;
      }
      .openItem:nth-child(10) {
        -webkit-animation-delay: 1.8s;
      }
    }
  }
  .phone {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .MyMonkey {
    margin-top: 50px;
    .operation {
      position: fixed;
      top: 220px;
      .sort {
        margin-left: 40px;
      }
    }
    .btns {
      position: fixed;
      top: 150px;
      .select {
        margin-left: 40px;
      }
    }
    .main {
      display: none;
    }
    .phone {
      display: block;
      .infinite-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        max-height: 1000px;
        padding-top: 35px;
        padding-left: 30px;
        padding-right: 10px;
        .monkeyItem {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 33%;
          .monkeyItemBg {
            background-image: url("../../../assets/images/game/myMonkey/bg.png");
            background-size: 100% 100%;
            width: 166.25px;
            height: 298px;
            margin-bottom: 55px;
            position: relative;
            .monkey {
              background-size: 100% 100%;
              width: 194.37px;
              height: 208.66px;
              margin-left: -14px;
              margin-top: -12px;
              margin-bottom: 2px;
            }
            .desc {
              font-size: 14px;
              padding: 0 6px;
              p {
                display: flex;
                align-items: center;
                margin-bottom: 6px;
                .title {
                  width: 45px;
                }
                .id {
                  font-size: 18px;
                }
              }
              p:last-child {
                margin-bottom: 0px;
              }
            }
            .tips {
              position: absolute;
              bottom: 55px;
              left: -42.6px;
              background-image: url("../../../assets/images/game/myMonkey/tips.png");
              background-size: 100% 100%;
              width: 42.6px;
              height: 42.6px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
            }
            .btn {
              cursor: pointer;
              background-size: 100% 100%;
              width: 116px;
              height: 33px;
              display: flex;
              justify-content: center;
              margin: 14px auto 0 auto;
              span {
                margin-top: 2px;
                font-size: 22px;
              }
            }
            .isFeed {
              background-image: url("../../../assets/images/game/myMonkey/feed.png");
            }
            .isEvolution {
              background-image: url("../../../assets/images/game/myMonkey/evolution.png");
            }
          }
        }
        .openItem {
          -webkit-animation: filpRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
          animation: filpRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          @-webkit-keyframes filpRight {
            0% {
              -webkit-transform: rotateY(-80deg);
              transform: rotateY(-80deg);
              opacity: 0;
            }
            100% {
              -webkit-transform: rotateY(0);
              transform: rotateY(0);
              opacity: 1;
            }
          }
          @keyframes filpRight {
            0% {
              -webkit-transform: rotateY(-80deg);
              transform: rotateY(-80deg);
              opacity: 0;
            }
            100% {
              -webkit-transform: rotateY(0);
              transform: rotateY(0);
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
</style>